<template>
  <div class="home-right">
    <div class="card-top-content">
      <div class="card-header-text card-header">
       合同总金额和业务类型占比
      </div>
      <ComLeftCenter ref="comLeftCenter" style="flex: 1"></ComLeftCenter>
    </div>

    <div class="card-bottom-content">
      <div class="card-header-text card-header">
        项目完成效率
        <el-input
          v-model="projectName"
          class="input-class"
          size="small"
          style="width: 44%"
          placeholder="请输入项目名称"
          clearable
        >
        </el-input>
        <el-button size="small" @click="handelSubmit">搜素</el-button>
      </div>
      <ComRightBottom ref="comRightBottom" style="flex: 1"></ComRightBottom>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
//@ts-ignore
import ComLeftCenter from "@/views/dataScreen/component/ComLeftCenter.vue";

//@ts-ignore
import ComRightBottom from "@/views/dataScreen/component/ComRightBottom.vue";

const projectName = ref("");

const comRightBottom = ref();
const comRightCenter = ref();
const comRightTop = ref();

const dialogVisible = ref(false);

const handleAdd = (val) => {
  if (val === true) {
    dialogVisible.value = true;
  }

  // plotProjectFormRef.value.showModal();
};

// 项目完成效率搜素
const handelSubmit = (val) => {
  val = projectName.value;
  comRightBottom.value.completionList(val);
};
</script>
<style scoped lang="scss">
@import "../index.scss";
.home-right {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 50px - 39px);
  height: calc(100vh - 50px - 39px - 20px);
  .content-flex-center {
    margin: 10px 0;
  }
  .card-top-content {
    // max-height: 28vh;
    // height: 28vh;
    height: 42.5vh;

    border-radius: 10px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .card-bottom-content {
    height: 42.5vh;
    // flex: 1;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  }
  .card-header {
    .el-button + .el-button {
      margin-left: 0px;
    }
    .tab {
      color: rgba(129, 131, 143, 1);
      padding: 10px 0;
      display: inline-block;
      font-size: 14px;
      cursor: pointer;
    }
    .selectTab {
      color: rgba(52, 204, 95, 1);
      border-bottom: 2px solid rgba(52, 204, 95, 1);
    }
  }
}
</style>
